<template>
  <div class="cinema-item-component">
    <div class="content">
      <div class="title">
        {{ info?.cinema_name }}
      </div>
      <div class="desc">
        {{ info?.cinema_addr }}
      </div>
      <div class="tags">
        <nut-tag color="#e37318" plain>限量特惠</nut-tag>
        <nut-tag color="#2ba471" plain>超低折扣</nut-tag>
      </div>
    </div>
    <div class="behind">
      <div class="price">
        <nut-price
          v-show="!(info?.down_price === '0.00')"
          :price="info?.down_price"
          size="normal"
          :decimal-digits="2"
          :thousands="true"
        />
        <div class="suffix">
          {{ info?.down_price === "0.00" ? "无场次" : "起" }}
        </div>
      </div>
      <div class="distance">
        <nut-price
          :price="info?.distance"
          size="small"
          :decimal-digits="1"
          symbol="km"
          position="after"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { toRefs } from "vue";
const props = defineProps({
  //子组件接收父组件传递过来的值
  info: Object,
});
//使用父组件传递过来的值
const { info } = toRefs(props);
</script>
<style lang="scss">
.cinema-item-component {
  display: flex;
  flex-direction: row;
  background: #fff;
  padding: 0.8rem;
  border-radius: 0.5rem;
  .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    .title,
    .desc {
      display: -webkit-box;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .title {
      font-size: 0.8rem;
      color: #15181d;
      font-weight: 500;
    }
    .desc {
      font-size: 0.6rem;
      color: #858a99;
    }
    .tags {
      display: flex;
      flex-direction: row;
      .nut-tag {
        margin-top: 0.2rem;
        margin-right: 0.2rem;
        font-size: 0.6rem;
      }
    }
  }
  .behind {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-left: 0.5rem;
    .price {
      line-height: 1rem;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      font-weight: 500;
      .suffix {
        color: #858a99;
        font-size: 0.6rem;
        padding-bottom: 0.2rem;
        padding-left: 0.2rem;
      }
    }
    .distance {
      line-height: 0.6rem;
      .nut-price {
        color: #858a99;
      }
    }
  }
}
</style>
